<style lang="less" scoped>
.help{
    .line-chart-con{
        
    }
    .help-box{
        width: 260px;
        height: 315px;
        border: 1px solid #eee;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        border-radius: 5px;
        transition: all 0.4s ease;
    }
    .help-box:hover{
        box-shadow: 0px 0px 5px rgb(214, 214, 214);
    }
    .help-add{
        line-height: 300px;
        text-align: center;
        font-size: 100px;
        color: #eee;
        transition: all 0.4s ease;
        cursor:pointer;
    }
    .help-add:hover{
        border: 1px solid #57a3f3;        
        color: #57a3f3;
    }
    .help-x{
        font-size: 28px;
        position: absolute;
        right: 8px;
        top: 5px;
        transform:rotate(45deg);
        color: #eee;
        transition: all 0.4s ease;
        cursor:pointer;
    }
    .help-x:hover{
        transform:rotate(-135deg);
        color: #57a3f3;
    }
    .help-title{
        font-size: 20px;
        height: 40px;
        border-bottom: 1px solid #eee;
        line-height: 40px;
        text-align: center;
    }
    .help-content{
        .help-content-text{
            margin: 10px;
            width: 238px;
            
            height: 220px;
        }
        .helpb{
            border: 1px solid #eee;
            padding: 4px 7px;
        }
    }
}
</style>

<template>
    <div class="help">
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-pulse"></Icon>
                    {{this.$route.meta.title}}
                </p>
                <div class="line-chart-con">
                    <div class="help-box" :style="thishelp===index?'border: 1px solid rgb(200, 221, 243);box-shadow: rgb(162, 207, 255) 0px 0px 9px;':''" v-for="(key,index) in data">
                        <Icon class="help-x" type="plus-round"></Icon>
                        <div class="help-title">
                            <span v-if="thishelp!==index" class="help-title-text">{{key.title}}</span>
                            <Input v-if="thishelp===index" style="width: 190px;margin-bottom: 5px;" v-model="thisform.title" placeholder="请输入标题"></Input>
                        </div>
                        <div class="help-content">
                            <div v-if="thishelp!==index" class="help-content-text helpb">{{key.context}}</div>
                            <Input v-if="thishelp===index" class="help-content-text" v-model="thisform.context" type="textarea" :autosize="{minRows: 10,maxRows: 10}" placeholder="请输入帮助内容..."></Input>
                        </div>
                        <div style="text-align: center;">
                            <Button v-if="thishelp!==index" type="ghost" @click="edit(index)" size="small">编辑</Button>
                            <Button v-if="thishelp===index" type="ghost" @click="save(index)" size="small">保存</Button>
                            <Button v-if="thishelp===index" type="ghost" @click="cancel()" size="small">取消</Button>
                        </div>
                        
                    </div>
                    <div v-if="thishelpform" class="help-box" style="border: 1px solid rgb(200, 221, 243);box-shadow: rgb(162, 207, 255) 0px 0px 9px;">
                        <div class="help-title">
                            <Input style="width: 190px;margin-bottom: 5px;" v-model="thisform.title" placeholder="请输入标题"></Input>
                        </div>
                        <div class="help-content">
                            <Input class="help-content-text" v-model="thisform.context" type="textarea" :autosize="{minRows: 10,maxRows: 10}" placeholder="请输入帮助内容.."></Input>
                        </div>
                        <div style="text-align: center;">
                            <Button type="ghost" @click="addSave()" size="small">保存</Button>
                            <Button type="ghost" @click="addCancel()" size="small">取消</Button>
                        </div>
                    </div>
                    <div v-if="!thishelpform" class="help-box help-add" @click="addHelp"><Icon type="plus-round"></Icon></div>
                    <div style="clear:both;"></div>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>


export default {
    components: {
        
    },
    data () {
        return {
            data:[],
            thishelp:'',
            thisform:{},
            thishelpform:false
        }
    },
    computed: {
        
    },
    methods: {
        init(){
            this.getHelp()
        },
        edit(i){
            this.addCancel()
            this.thishelp=i
            let data={
                id:this.data[i].id,
                version:this.data[i].version,
                context:this.data[i].context,
                title:this.data[i].title,
            }
            this.thisform=data
            
        },
        getHelp(){
            this.$api.getHelp().then(response=>{
                response.json().then(responseJson=> {
                    if(responseJson.data==null){
                        this.data=[]
                    }else{
                        this.data=responseJson.data
                    }
                })
            })
        },
        save(){
            this.$api.setHelp(this.thisform).then(response=>{
                response.json().then(responseJson=> {
                    
                    if(responseJson.success==true){
                        this.data[this.thishelp]=responseJson.data
                        this.$Notice.success({
                            title: '修改成功',
                        });
                        this.cancel()
                    }else{
                        this.$Notice.error({
                            title: '修改失败',
                            desc: responseJson.error
                        });
                    }
                })
            })
        },
        cancel(){
            this.thishelp=''
            this.thisform={}
            
        },
        addSave(){
            this.$api.addHelp(this.thisform).then(response=>{
                response.json().then(responseJson=> {
                    
                    if(responseJson.success==true){
                        this.data.push(responseJson.data)
                        this.$Notice.success({
                            title: '添加成功',
                        });
                        this.addCancel()
                    }else{
                        this.$Notice.error({
                            title: '添加失败',
                            desc: responseJson.error
                        });
                    }
                })
            })
        },
        addCancel(){
            this.thishelpform=false
            this.thisform={}
        },
        addHelp(){
            if(this.thishelp!==''){
                this.$Message.error('无法添加，请处理完当前事项');
            }else{
                this.thishelpform=true
            }
            // this.data.push({t:123123,c:112314123})
        }
    },
    mounted (){
        this.init()
    }
};
</script>
